// src/App.vue
<template>
 <div id="app">
	<el-container>
	<el-main>
	<el-form aij="登录会员" :model="loginForm">
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
		  aij="输入账号"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
		  aij="输入密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
		  aij="输入验证码"
        >
        </el-input>
      </el-form-item>
      <el-checkbox aij="选择记住我" v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
      <el-form-item>
        <el-button
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
		  aij="提交登录会员"
        >
          <span>登 录</span>
        </el-button>
      </el-form-item>
    </el-form>
	<el-form aij="搜索菜单" :model="queryParams" ref="queryForm" label-width="100px">
		<el-form-item label="菜单名称" prop="menuName">
		  <el-input
		    v-model="queryParams.menuName"
		    placeholder="请输入菜单名称"
		    clearable
		    @keyup.enter.native="handleQuery"
			aij="输入要搜索的菜单名称"
		  />
		</el-form-item>
		<el-form-item label="状态" prop="status">
			<el-select aij="选择要搜索的菜单状态" v-model="queryParams.status" placeholder="菜单状态" :popper-append-to-body="false" clearable>
			  <el-option
				v-for="dict in statusDicts"
				:key="dict.value"
				:label="dict.label"
				:value="dict.value"
			  />
			</el-select>
		</el-form-item>
	    <el-form-item>
			<el-button aij="提交搜索菜单" type="primary" @click="handleQuery">搜 索</el-button>
			<el-button
			  type="primary"
			  icon="el-icon-edit"
			  @click="handleUpdate"
			  aij="修改菜单"
			>
			  <span>修 改</span>
        </el-button>
		</el-form-item>
	</el-form>
	</el-main>
	</el-container>
    <el-dialog title="修改菜单" :visible.sync="open" width="600px" append-to-body>
      <div style="height:50vh">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio aij="选择要修改的菜单类型" label="M">目录</el-radio>
                <el-radio aij="选择要修改的菜单类型" label="C">菜单</el-radio>
                <el-radio aij="选择要修改的菜单类型" label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input aij="输入要修改的菜单名称" v-model="form.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
	  </div>
      <div slot="footer" class="dialog-footer">
        <el-button aij="提交修改菜单" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
 </div>
</template>
<script>
export default {
    name: 'demo',
	data() {
		return {
			loginForm: {
				username: "admin",
				password: "admin123",
				rememberMe: false,
				code: ""
			},
			open: false,
			form: {
				menuName: '',
				menuType: 'C'
			},
			queryParams: {},
			statusDicts: [
				{
					label: '正常',
					value: '1'
				},
				{
					label: '禁用',
					value: '0'
				}
			]
		}
	},
	mounted() {
		this.$aij();
	},
    methods: {
		handleLogin() {
			console.log(this.loginForm);
		},
		handleQuery() {
			console.log(this.queryParams);
		},
		handleUpdate() {
			this.open = true;
		},
		submitForm() {
			console.log(this.form);
		}
	}
}
</script>

